<script setup lang="ts">
import { defineProps, computed, toRefs } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { adminInfo } = toRefs(userStore);
interface PropsInter {
	navList: Array<RouteRecordRaw>;
}
const props = defineProps<PropsInter>();
const list = computed(() => {
	return props.navList.map((e) => {
		let navInfo = { ...e };
		if (e.children && e.children.length) {
			navInfo.children = e.children.filter((e) => {
				const adminTypeList: Array<number> = e.meta && Array.isArray(e.meta.adminType) ? e.meta.adminType : [];
				return (
					!adminTypeList.length ||
					(adminTypeList.length && adminTypeList.includes(Number(adminInfo.value?.adminType)))
				);
			});
		}
		return navInfo;
	});
});
const openHelpCenter = () => {
	window.open('#/index/helpCenter', '_blank');
};
</script>

<template>
	<template v-for="it in list">
		<template v-if="it.children && it.children.length > 0">
			<a-sub-menu :key="String(it.name)">
				<template #icon>
					<i class="iconfont" :class="it.meta?.icon"></i>
				</template>
				<template #title>{{ it.meta ? it.meta.title : '' }}</template>
				<menu-nav-item :nav-list="it.children" />
			</a-sub-menu>
		</template>
		<template v-else-if="it.meta?.isHelpCenter">
			<div :key="String(it.name)" class="help-center" @click="openHelpCenter">
				<icon-bookmark style="color: #88909b" />
				<span class="help-text"> {{ it.meta ? it.meta.title : '' }}</span>
			</div>
		</template>

		<template v-else-if="!it.meta?.hidden">
			<a-menu-item :key="String(it.name)">
				<template v-if="it.meta?.icon" #icon>
					<i class="iconfont" :class="it.meta?.icon"></i>
				</template>
				{{ it.meta ? it.meta.title : '' }}
			</a-menu-item>
		</template>
	</template>
</template>

<style lang="less">
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}

.help-center {
	cursor: pointer;
	width: 204px;
	height: 40px;
	line-height: 40px;
	padding: 0px 12px;
}

.help-center:hover {
	background: #f2f3f5;
	line-height: 40px;
}

.help-text {
	margin-left: 18px;
	color: #505968;
}
</style>
